单选多选场景的解决方案集合

单选多选场景的解决方案集合

场景

经常遇到一些类似菜单和导航这样的页面效果需求，基本情况是：

1. 有很多的带选项，其效果是选中和未选中
2. 有的是多选，有的是单选

解决

1.单选场景

• 因为是单选场景所以需要切换

解决方法一

1. 设定每个备选状态为选中和未选中。

2. 当变选中状态变更时对所有的备选进行遍历主要作用是：

   1. 把所有的项目重置成未选中。
   2. 把选中的那个项目设置成选中状态。

解决方法二

该方法主要是结合了视觉和数据两方面的考虑，利用比较的方式动态的设置class来呈现效果。

1. 设置一个值currentSelected。

该值可以有两个状态，一是无值，二是选中的某个值。
该值应该是一个标志值，也可以是个实际值。

1. 当在选中项目之间切换时，只是更改currentSelected的值即可。
2. 每次在选中的项目之间切换时遍历整个项目，然后如果状态的设置为选中，不符合的设置为未选中。
3. 如果currentSelected已经存在，那么不进行任何操作。

解决方案三

该解决方案不用遍历，基本思想是，把已经存储的相更改状态，把选中的线在更改状态。
该方案主要就是进行el元素的查询及更改。

2.多选场景

解决方法

基本思想是使用数组保存已经选中的项，然后多该数组进行栈操作。